<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姚德秋">
    <title>百度新闻</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            height: 2000px;
        }

        .header {
            width: 100%;
            height: 100px;
            /* height: 50px;  */
            /* float: right; */
        }

        .header li {
            list-style: none;
            margin: 0 5px;
            padding: 0;
             float: right; 
        }
        

        .nsrbar {
            width: 300px;
            float: right;

            /* display: inline-block; */
            /* line-height: 1px; */
        }

        .zzzz {
            width: 450px;
            height: 50px;
            /* display: inline-block; */
            float: right;
            /* line-height: 5px; */
            margin-top: -15px;
            margin-right: 100px;
        }

        a {
            color: black;
            font-size: 15px;
        }
        /* section{
        display: inline-block;
       } */

        .ll {
            width: 1100px;
            margin: 0 auto;
        }

        .qian img {
            width: 150px;
            height: 40px;
            float: left;
            margin-top: 60px;
            margin-right: 8px;
        }

        .zhong {
            width: 650px;
            float: left;
            /* margin: 0 auto; */
            vertical-align: center;
            margin-top: 30px;
        }

        .zhong input {
            width: 500px;
            height: 40px;
        }

        button {
            width: 140px;
            height: 40px;
            background-color: lightskyblue;
        }

        .hou {
            width: 200px;
            float: left;
            margin-top: 40px;
            margin-left: 8px;

            /* vertical-align: center; */
        }
        .biaoti{
              width: 300px;  
            /* display: block; */
             margin-left: 557px;  
           /* justify-content: flex-start; */
       }

       .lolo{
           background-color: gold;
           height: 40px;
           width: 100%;
       }
       .lolo li{
           list-style: none;
            margin: 0 10px;
            padding: 0;
            float: left;
            line-height: 40px;
       }
       .lolo ul{
           width: 1300px;
           margin: 0 auto;
       }
       .active{
           background-color: darkblue;
           color: white;
           /* display: none; */
       }
    </style>
</head>

<body>
    <div class="header">
        <div class="usrbar">
            <ul>
                <li><a href="">百度首页</a></li>
                <li><a href="">登录</a></li>
                <li><a href="">注册</a></li>
                <li><a href="">百度新闻客户端</a></li>
            </ul>
        </div>
        <div class="zzzz">
            <ul>
                <li><a href="">网页</a></li>
                <li>新闻</li>
                <li><a href="">贴吧</a></li>
                <li><a href="">知道</a></li>
                <li><a href="">音乐</a></li>
                <li><a href="">图片</a></li>
                <li><a href="">视频</a></li>
                <li><a href="">地图</a></li>
                <li><a href="">文库</a></li>
            </ul>
        </div>
        <div class="ll">
            <section class="qian">
                <img src="xinwen.png" alt="">
            </section>
            <section class="zhong">
                <input type="text" name="" value="">
                <button type="">百度一下</button>
            </section>
            <section class="hou">
                <a href="">帮助</a>
                <a href="">高级搜索</a>
                <a href="">设置</a>
            </section>
        </div>


    </div>
    <div class="biaoti">
        <input type="radio" name="aaa" value="new1">
        <label for="labe1">新闻全文</label>
        <input type="radio" name="aaa" value="new2">
        <label for="lebel2">新闻标题</label>
    </div>


    <div class="lolo">
        <ul>
            <li>首页</li>
            <li class="active">百家号</li>
            <li>国内</li>
            <li>国际</li>
            <li>军事</li>
            <li>社会</li>
            <li>财经</li>
            <li>娱乐</li>
            <li>体育</li>
            <li>互联网</li>
            <li>科技</li>
            <li>游戏</li>
            <li>时尚</li>
            <li>女人</li>
            <li>汽车</li>
            <li>个性推荐</li>
            <li>更多</li>
        </ul>
    </div>
</body>

</html>
<script>
   var div = document.querySelector('.lolo');
   var alli = document.querySelectorAll('.lolo li');

       var lastIndex = 1;
       for(var i = 0;i<alli.length;i++){
           alli[i].index = i;
           alli[i].onmouseover = function(ev){
           
            alli[lastIndex].className = '';
            
            this.className = 'active';
        }
        alli[i].onmouseout = function(){
           
            lastIndex = this.index; 
        }
       }
    window.onscroll = function(){
        if(
            document.body.scrollTop || document.documentElement.scrollTop >=150

        ){
            div.style.position = 'fixed';
            div.style.top = '0';
        }
        else{
           div.style.cssText = '';
        }
    }
    
</script>